<template>
    <div>
         <div class="common-page__head">
            <!-- <comp-paths class="route" :paths="['/stats', $route.fullPath]"></comp-paths> -->
            <div class="title">
                <el-button type="plain" size="small" icon="el-icon-top" @click="setCity()" v-if="cityId">返回</el-button>
            </div>
        </div>
        <div class="common-page__body page-stats-order-city__body">
            <div class="row">
                <div class="col col--2em" style="font-size: 26px">排名</div>
                <div class="col" style="font-size: 26px">
                    <span>城市</span>
                </div>
                <div class="col" style="font-size: 26px">走访数量</div>
            </div>
            <div class="row" v-for="(city, index) in cityList" :key="city.id">
                <div class="col col--2em" style="font-size: 26px">
                    <span>{{ index + 1 }}</span>
                </div>
                <div class="col" style="font-size: 26px">{{ city.fwxz }}</div>
             
                <div class="col" style="font-size: 26px">{{ city.count }}</div>
                
                
                
            </div>
            <div class="row">
                <div class="col col--2em" style="font-size: 26px;"></div>
                <div style="font-size: 26px;" class="col">合计</div>
                <div style="font-size: 26px;" class="col">{{sum}}</div>

            </div>
        </div>
        
    </div>
</template>
<script>
import user from "../../plugins/user"   

import { string, int } from "../../util";

export default {
    name: "foue",
 
    data: () => ({
            loading: false,
            cityId: "",
            cityList: [],
            open:false,
            countryList:[],
            areaId:null,
            status:null,
            oopenfa:true

        }),
 computed:{
        sum(){
            let sum =0
            for (let index = 0; index < this.cityList.length; index++) {
                const element = this.cityList[index];
                sum += int(element.count)
                
            }
            return sum
        },
  
        
    },  
    methods:{
          
             setCity(city) {
                this.countryList = [];
                if (this.loading) return;
                this.cityId = city ? city.id : "";
                this.search(true);
            },
          
       
       
            setban(params,b){
                this.status = b
                this.areaId =params
            
                this.open = true;
                this.getsetxian(a)
            },
            setxian(params){
                this.areaId = params;
                this.cityId = '999999'
                this.open = true;
                this.getsetxian(params)
            },
            setCity(city) {
                this.oopenfa = true;
                this.cityId = '';
                this.countryList = [];
                if (this.loading) return;
                this.cityId = city ? city.id : "";
                this.search(true);
            },
            search(clean) {

                if (this.loading) return;
                if (clean) this.cityList = [];
                this.loading = true;
                user.getVisitsList().then((res) => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.cityList = res.data.sort(function (a, b) {
                            return b.count - a.count;
                        });
                       
                    } else {
                       
                    }
                });
            },  
    },
   mounted(){
        this.search();
   }
}
</script>

<style lang="scss" scoped>
@import '../../common/common.css';
  .common-page__head{
        margin: 0;
    }
    .common-page__body{
         height: 65vh;
        //  width: 40vw;
        overflow-y: auto; 
    .row{
        width: 100%;
        // background: red;
        color: white;
        .col{
             background-color: rgba(0, 24, 106, 0.5);
             color: white;

        }
    }
  
    }
    .pagecoun{
        height: 63vh;
        overflow-y: auto;
        .TableLis{
            .tabloading{
                 position: relative;
                left: 45%;
                width: 200px;
                height: 200px;
                font-size: 20px;
                line-height: 200px;
                color: white;
                text-align: center;
            }

            .tali ::v-deep .el-table__row{
                background-color: #0C1E5E;

                color: white;
            }
            .tali ::v-deep  tr:hover>td {
                    background-color: #1808c3;
                    }
        }
    }
  
  
  

</style>